<template>
    <div class="body">
        <div class="order-content">
            <div class="item shop-name">
                <p class="name">{{order_info.shop_name}}</p>
                <p>{{order_info.status == -4?'已取消':!order_info.is_pay?'未支付':order_info.is_pay && order_info.status == 0?"已支付":order_info.status == 1?"商家已接单":order_info.status == 2?"配送员接单":order_info.status == 3?"派送中":order_info.status == 4?"已送达":order_info.status == 5?"已完成":order_info.status == -1?"退款中":order_info.status == -2?"已退款":"拒绝退款"}}</p>
            </div>
        </div>
        <div class="order-content">
            <div class="item order-info">
                <p>点餐信息</p>
            </div>
            <div class="item order-info" v-for="(item,index) of order_info.goods" :key="index">
                <p>{{item.name}}</p>
                <p>×{{item.goods_num}}</p>
                <p>￥{{item.amount}}</p>
            </div>
            <div class="item order-info">
                <p class="order-money">实付￥{{order_info.total_price}}</p>
            </div>
        </div>
        <div class="order-content">
            <div class="item order-info">
                <p>配送信息</p>
            </div>
            <div class="item order-info">
                <p>配送地址</p>
                <p>{{order_info.consignee_address}}</p>
            </div>
            <div class="item order-info">
                <p>收货人</p>
                <p>{{order_info.consignee_name}}/{{order_info.consignee_phone}}</p>
            </div>
            <div class="item order-info">
                <p>配送员</p>
                <p v-if="order_info.send_phone"><a :href="'tel:'+order_info.send_phone"><i class="iconfont icon-lianxi-"></i></a>{{order_info.send_name}}</p>
                <p v-else>暂无配送员</p>
            </div>
        </div>
        <div class="order-content">
            <div class="item order-info">
                <p>订单信息</p>
            </div>
            <div class="item order-info">
                <p>订单号</p>
                <p><i class="iconfont icon-fuzhi-" @click="copy(order_info.order_no)"></i>{{order_info.order_no}}</p>
            </div>
            <div class="item order-info">
                <p>下单时间</p>
                <p>{{getNowFormatDate(order_info.create_time)}}</p>
            </div>
            <div class="item order-info">
                <p>商家信息</p>
                <p><a :href="'tel:'+order_info.bank_phone"><i class="iconfont icon-lianxi-"></i></a>{{order_info.shop_name}}</p>
            </div>
        </div>
    </div>
</template>
<script>
import {Toast} from "mint-ui"
import {orderInfo} from '../api'
export default {
    data() {
        return {
            order_info:{},
            order_no : ""
        }
    },
    created(){
        this.order_no = this.$route.query.order_no
        // console.log(this.order_no);
        this.getOrderInfo(this.order_no);
    },
    methods:{
        getNowFormatDate(time) {//获取当前时间
                　　var date = new Date(time*1000);
                　　var seperator1 = "-";
                　　var seperator2 = ":";
                　　var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
                　　var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
                　　var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                　　　　+ " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();
                　　return currentdate;
        },
        getOrderInfo(no){
            let params = {
                token:this.$store.getters.token,
                order_no:no
            }
            orderInfo(params).then(res=>{
                // console.log(res.data);
                this.order_info = res.data;
                if(res.code !== 200){
                    Toast('参数错误');
                    history.go(-1);
                }
            })
        },
        copy(c){
            // console.log(c);
            let url = c;
            let oInput = document.createElement('input');
            oInput.style.display = "none";
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            Toast('复制订单号码成功');
        }
    }
}
</script>
<style scoped>
    .body{
        background: linear-gradient(#EC5D3D,#F1463C);
        background-size: 100% 4rem;
        background-repeat: no-repeat;
        width: 100%;
        height: Calc(100vh - 3rem);
        background-color: #F2F2F2;
    }
    .body::before{
        content: "";
        display: table;
    }
    .shop-name{
        height: 3rem;
        border-radius: 5px;
        margin: 2.5rem auto 0.5rem;
        font-weight: bolder;
        color: #F0463C;
    }
    .shop-name .name {
        width: 70%;
        font-size: 1.2rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        color: #333;
    }
    .order-content{
        width: 90%;
        padding:0 3%;
        background: #fff;
        border-radius: 5px;
        margin:0.5rem auto;
    }
    .item{
        width: 94%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 5%;
    }
    .order-info{
        position: relative;
    }
    .order-info:first-child p{
        width: 33%;
    }
    .order-info p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        text-align: right;
        line-height: 2rem;
    }
    .order-info:first-child{
        border-bottom: 0.02rem solid #d8d8d8;
    }
    .order-info:first-child p:first-child{
        line-height: 3rem;
        font-weight: 800;
    }
    .order-info p:first-child{
        text-align: left;
        width: 33%;
    }
    .order-info .iconfont{
        font-size: 0.9rem;
        color: #F5473C;
    }
    .order-info .iconfont::after{
        content: "|";
        margin:0 0.5rem;
        position: relative;
        top: -0.2rem;
        font-size: 0.5rem;
        font-weight: bolder;
        color: #464646;
    }
    .order-money{
        width: 100% !important;
        color: #F23D3D;
        font-weight: bolder;
        text-align: right !important;
        border-top: 0.02rem solid #D8D8D8;
        line-height: 3rem !important;
    }
</style>